<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>处理反馈 - 见闻间后台管理</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-ui@2.15.13/lib/theme-chalk/index.css">
    <script src="/install/js/vue2.6.11.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/element-ui@2.15.13/lib/index.js"></script>
    <script src="/install/js/axios.min.js"></script>
    <script>
        function getUrlParam(name) {
            const reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)');
            const r = window.location.search.substr(1).match(reg);
            if (r != null) return unescape(r[2]);
            return null;
        }

        axios.interceptors.request.use(
            config => {
                const token = localStorage.getItem('token') || sessionStorage.getItem('token') || getCookie('token');
                if (token) {
                    config.headers['Authorization'] = 'Bearer ' + token;
                }
                return config;
            },
            error => Promise.reject(error)
        );

        function getCookie(name) {
            const value = '; ' + document.cookie;
            const parts = value.split('; ' + name + '=');
            if (parts.length === 2) return parts.pop().split(';').shift();
        }
    </script>
    <style>
        .app-container { padding: 20px; }
        .user-info { line-height: 1.8; }
        .detail-section {
            margin-bottom: 20px;
            padding: 15px;
            background: #f5f7fa;
            border-radius: 4px;
        }
        .section-title {
            font-weight: bold;
            color: #606266;
            margin-bottom: 15px;
            padding-bottom: 8px;
            border-bottom: 1px solid #ebeef5;
        }
        .process-section {
            margin-top: 30px;
            padding: 20px;
            background: #e6f7ff;
            border-radius: 4px;
            border-left: 4px solid #1890ff;
        }
        .process-title {
            font-weight: bold;
            color: #1890ff;
            margin-bottom: 15px;
        }
    </style>
</head>
<body>
    <div id="app" class="app-container">
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <span>处理反馈</span>
                <div style="float: right;">
                    <el-button 
                        size="small" 
                        style="margin-top: -5px; margin-right: 10px;"
                        @click="backToList"
                    >
                        返回列表
                    </el-button>
                    <el-button 
                        type="primary" 
                        size="small" 
                        style="float: right; margin-top: -5px;"
                        @click="save"
                        :loading="saving"
                    >
                        保存处理结果
                    </el-button>
                </div>
            </div>

            <!-- 反馈详情信息 -->
            <div class="detail-section">
                <div class="section-title">反馈详情</div>
                <el-form ref="form" :model="formData" label-width="120px">
                    <el-row :gutter="20">
                        <el-col :span="6">
                            <el-form-item label="反馈ID">
                                <el-input v-model="formData.id" disabled></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="用户ID">
                                <el-input v-model="formData.user_id" disabled></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="反馈场景">
                                <el-select v-model="formData.scene" disabled>
                                    <el-option value="0" label="功能异常"></el-option>
                                    <el-option value="1" label="产品建议"></el-option>
                                    <el-option value="2" label="违规举报"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="IP地址">
                                <el-input v-model="formData.ip" disabled></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-form-item label="提交时间">
                        <el-input v-model="formatTime(formData.create_time)" disabled></el-input>
                    </el-form-item>

                    <el-form-item label="反馈内容">
                        <el-input 
                            v-model="formData.content" 
                            type="textarea" 
                            :rows="5" 
                            disabled
                        ></el-input>
                    </el-form-item>

                    <el-form-item label="联系方式" v-if="formData.contact">
                        <el-input v-model="formData.contact" disabled></el-input>
                    </el-form-item>

                    <el-form-item label="User-Agent" v-if="formData.ua">
                        <el-input 
                            v-model="formData.ua" 
                            type="textarea" 
                            :rows="3" 
                            disabled
                        ></el-input>
                    </el-form-item>

                    <el-form-item label="相关截图" v-if="formData.images">
                        <el-image 
                            v-for="(img, index) in formData.images.split(',')" 
                            :key="index" 
                            :src="img" 
                            style="width: 150px; height: 150px; margin-right: 10px; margin-bottom: 10px;"
                            :preview-src-list="formData.images.split(',')"
                        ></el-image>
                    </el-form-item>
                </el-form>
            </div>

            <!-- 处理区域 -->
            <div class="process-section">
                <div class="process-title">处理操作</div>
                <el-form ref="processForm" :model="formData" label-width="120px" :rules="rules">
                    <el-form-item label="当前状态">
                        <el-tag :type="statusMap[formData.status].type">
                            {{ statusMap[formData.status].label }}
                        </el-tag>
                    </el-form-item>

                    <el-form-item label="处理状态" prop="status">
                        <el-select v-model="formData.status" placeholder="请选择处理状态">
                            <el-option value="0" label="待处理"></el-option>
                            <el-option value="1" label="已采纳"></el-option>
                            <el-option value="2" label="已忽略"></el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item label="处理备注" prop="process_remark">
                        <el-input 
                            v-model="formData.process_remark" 
                            type="textarea" 
                            :rows="6" 
                            placeholder="请详细描述处理过程和结果..."
                        ></el-input>
                    </el-form-item>
                </el-form>
            </div>
        </el-card>
    </div>

    <script>
        new Vue({
            el: '#app',
            data() {
                return {
                    formData: {
                        id: '',
                        user_id: '',
                        scene: '',
                        content: '',
                        images: '',
                        contact: '',
                        ip: '',
                        ua: '',
                        status: '',
                        create_time: '',
                        update_time: '',
                        process_remark: ''
                    },
                    saving: false,
                    statusMap: {
                        '0': { label: '待处理', type: 'warning' },
                        '1': { label: '已采纳', type: 'success' },
                        '2': { label: '已忽略', type: 'info' }
                    },
                    rules: {
                        status: [
                            { required: true, message: '请选择处理状态', trigger: 'change' }
                        ],
                        process_remark: [
                            { required: true, message: '请输入处理备注', trigger: 'blur' },
                            { min: 10, max: 500, message: '处理备注长度应在10-500个字符之间', trigger: 'blur' }
                        ]
                    }
                };
            },
            created() {
                const urlParams = new URLSearchParams(window.location.search);
                const id = urlParams.get('id');
                if (id) {
                    this.fetchFeedbackDetail(id);
                } else {
                    this.$message.error('未找到反馈ID');
                }
            },
            methods: {
                fetchFeedbackDetail(id) {
                    axios.get(`/science/feedback/detail?id=${id}`)
                        .then(response => {
                            if (response.data.code === 200) {
                                this.formData = response.data.data || {};
                            } else {
                                this.$message.error(response.data.msg || '获取数据失败');
                            }
                        })
                        .catch(error => {
                            console.error('获取详情失败:', error);
                            this.$message.error('获取数据失败');
                        });
                },
                formatTime(timestamp) {
                    if (!timestamp) return '-';
                    const date = new Date(timestamp * 1000);
                    return date.toLocaleString('zh-CN', {
                        year: 'numeric',
                        month: '2-digit',
                        day: '2-digit',
                        hour: '2-digit',
                        minute: '2-digit',
                        second: '2-digit'
                    });
                },
                save() {
                    this.$refs.processForm.validate(valid => {
                        if (valid) {
                            this.saving = true;
                            
                            const dataToSend = {
                                id: this.formData.id,
                                status: this.formData.status,
                                process_remark: this.formData.process_remark
                            };

                            axios.post(`/science/feedback/process`, dataToSend)
                                .then(response => {
                                    if (response.data.code === 200) {
                                        this.$message.success('处理成功');
                                        setTimeout(() => {
                                            this.backToList();
                                        }, 1500);
                                    } else {
                                        this.$message.error(response.data.msg || '处理失败');
                                    }
                                })
                                .catch(error => {
                                    console.error('保存处理结果失败:', error);
                                    this.$message.error('保存失败，请重试');
                                })
                                .finally(() => {
                                    this.saving = false;
                                });
                        }
                    });
                },
                backToList() {
                    window.location.href = '/science/feedback/index';
                }
            }
        });
    </script>
</body>
</html>